<template>
	<a-upload
		v-if="props.uploadMode === 'defaults'"
		v-bind="$attrs"
		name="file"
		:action="action"
		:headers="headers"
		@change="handleChange"
		@remove="fileDelete"
	>
		<a-button>
			<upload-outlined></upload-outlined>
			上传
		</a-button>
	</a-upload>

	<a-upload-dragger
		v-if="props.uploadMode === 'drag'"
		v-bind="$attrs"
		name="file"
		:multiple="true"
		:action="action"
		:headers="headers"
		@change="handleChange"
		@remove="fileDelete"
	>
		<p class="ant-upload-drag-icon">
			<inbox-outlined></inbox-outlined>
		</p>
		<p class="ant-upload-text">单击或拖动文件到此区域上传</p>
		<p class="ant-upload-hint"></p>
	</a-upload-dragger>
</template>

<script setup name="uploadIndex">
	import tool from '@/utils/tool'
	import sysConfig from '@/config/index'
	import fileApi from '@/api/dev/fileApi'
	const emit = defineEmits({ uploadDone: null })
	const headers = ref({
		token: tool.data.get('TOKEN')
	})
	const props = defineProps({
		action: {
			type: String,
			default: '/dev/file/uploadDynamicReturnId',
			required: false
		},
		// 上传方式 defaults || drag
		uploadMode: {
			type: String,
			default: 'defaults',
			required: false
		}
	})
	const action = sysConfig.API_URL + props.action

	const handleChange = (info) => {
		if (info.file && info.file.status === 'done' && info.file.response && info.file.response.data) {
			fileApi.fileDetail({ id: info.file.response.data }).then((res) => {
				info.file.url = res.downloadPath
			})
		}
		// let result = []
		// for (let a = 0; a < info.fileList.length; a++) {
		// 	const file = info.fileList[a]
		// 	if (file.status && file.status === 'done' && file.response && file.response.code === 200) {
		// 		result.push(file.response.data)
		// 	}
		// }
		// if (result.length > 0) {
		// 	emit('uploadDone', result)
		// }
	}

	const fileDelete = (file) => {
		fileApi.fileDelete([{ id: file.response.data }]).then((res) => {})
	}
</script>
